<template>
  <section class="no-print">
    <el-form
      label-width="10rem"
      ref="initializeForm"
      :model="costData"
      :loading="loading"
      :rules="rules"
    >
      <el-form-item label="退宿(自离)日期" prop="outDate">
        <el-date-picker
          v-model="costData.outDate"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickOptions"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="costData.name" @blur="getBedInfo(costData.name)"></el-input>
      </el-form-item>
      <el-form-item label="身份证号码" prop="_sfz">
        <el-select
          v-model="costData.sfz"
          placeholder="请选择"
          :disabled="sfzDisabled"
          @change="sfzChange(costData.sfz)"
        ></el-select>
      </el-form-item>
      <el-form-item label="工号" prop="jobnumber">
        <el-input v-model="costData.jobNumber" disabled></el-input>
      </el-form-item>
      <el-form-item label="部门" prop="department">
        <el-input v-model="costData.department" disabled></el-input>
      </el-form-item>
      <el-form-item label="入住位置" prop="position">
        <el-input v-model="costData.position" disabled></el-input>
      </el-form-item>
      <el-form-item label="当前冷水表" prop="cold">
        <el-input v-model.number="costData.cold"></el-input>
      </el-form-item>
      <el-form-item label="当前热水表" prop="hot">
        <el-input v-model.number="costData.hot"></el-input>
      </el-form-item>
      <el-form-item label="当前电表" prop="electric">
        <el-input v-model.number="costData.electric"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" @click.native="resettingSubmit('initializeForm')">重置</el-button>
        <el-button type="success" @click.native="calcSubmit">费用计算</el-button>
        <el-button type="primary" @click.native="leadingInSubmit">导入</el-button>
        <el-button type="primary" @click.native="dayinSubmit">打印</el-button>
      </el-form-item>
    </el-form>

    <!--计算结果-->
    <el-table id="print" :data="tableData" style="width: 100%" v-loading="Loading">
      <el-table-column align="center" label="区域名称" prop="affiliation" fixed min-width="150"></el-table-column>
      <el-table-column align="center" label="宿舍楼名称" prop="dorm" min-width="100"></el-table-column>
      <el-table-column align="center" label="房间号" prop="room" min-width="50"></el-table-column>
      <el-table-column align="center" label="工号" prop="jobNumber" min-width="100"></el-table-column>
      <el-table-column align="center" label="姓名" prop="name" min-width="100"></el-table-column>
      <el-table-column align="center" label="冷水费" prop="coldCost" min-width="100">
        <template slot-scope="scope">
          <div>{{ roundNumber(scope.row.coldCost) }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="热水费" prop="hotCost" min-width="100">
        <template slot-scope="scope">
          <div>{{ roundNumber(scope.row.hotCost) }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="电费" prop="electricCost" min-width="100">
        <template slot-scope="scope">
          <div>{{ roundNumber(scope.row.electricCost) }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="公共冷水费" prop="avgColdCost" min-width="100">
        <template slot-scope="scope">
          <div>{{ roundNumber(scope.row.avgColdCost) }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="公共热水费" prop="avgHotCost" min-width="100">
        <template slot-scope="scope">
          <div>{{ roundNumber(scope.row.avgHotCost) }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="公共电费" prop="avgElectricCost" min-width="100">
        <template slot-scope="scope">
          <div>{{ roundNumber(scope.row.avgElectricCost) }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="合计" prop="totalCost" min-width="100">
        <template slot-scope="scope">
          <div>{{ roundNumber(scope.row.totalCost) }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="入住天数" prop="singleDay" min-width="100"></el-table-column>
    </el-table>
  </section>
</template>
<script>
export default {
  data() {
    return {
      costData: {
        jobNumber: null,
        name: null,
        department: null,
        cold: null,
        hot: null,
        electric: null,
        outDate: null,
        position: null,
        _outDate: null,
        sfz: null
      },
      loading: false
    };
  },
  methods: {},
  mounted() {}
};
</script>